<template>
  <div class="mcht-info-view-pic">
    <div
      @click="clickViewPic"
      :class="{ pic_div: true, 'red-text': isred }"
      v-if="newValue"
    >
      {{ title }}{{ picType }}
    </div>
    <div v-else>-</div>
    <!-- 预览 -->
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="srcList"
    ></el-image-viewer>
  </div>
</template>
<script lang="ts" setup>
import { ref, inject, computed } from "vue";

const $MessageBox: any = inject("$MessageBox");
const $utils: any = inject("$utils");
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  isred: {
    // 修改样式
    type: Boolean,
    default: false,
  },
  title: {
    //预览图时的标题
    type: String,
    default: "预览影像",
  },
});
const newValue = ref(props.value);
const showViewer = ref(false);
let srcList = ref([]);
/** 计算 */
const picType = computed(() => {
  let type = "";
  if (newValue.value) {
    let arr = newValue.value.split(".");
    type = "." + arr[arr.length - 1];
  }
  return type;
});
/** 方法 */
/** 预览图片 */
const clickViewPic = () => {
  if (newValue.value) {
    let fileType = newValue.value.substring(
      newValue.value.lastIndexOf(".") + 1
    );
    $utils
      .downloadImageOss({ filePath: newValue.value, isTmp: "0" })
      .then((result: any) => {
        if (fileType == "jpg" || fileType == "png" || fileType == "jpeg") {
          let arr = [];
          arr.push(result.fileUrl);
          srcList = [...arr] as any;
          showViewer.value = true;
        } else {
          $utils.downloadFile(result.fileUrl);
        }
      })
      .catch((error: any) => {
        $MessageBox
          .alert({ txt: "影像获取错误！", type: "danger" })
          .then(() => {})
          .catch(() => {});
      });
  } else {
    $MessageBox
      .alert({ txt: "影像获取错误！", type: "danger" })
      .then(() => {})
      .catch(() => {});
  }
};
// 关闭大图查看
const closeViewer = () => {
  showViewer.value = false;
};
</script>

<style lang="scss" scoped>
.mcht-info-view-pic {
  .pic_div {
    color: var(--theme-primary);
    cursor: pointer;
  }
  .red-text {
    color: red !important;
    cursor: pointer;
  }
}
</style>